import React from 'react'
import { getAllGoods, getAllGoodsAns } from '../../../../api/goods'
import GuessItem from './GuessItem/GuessItem'
import { ImageList, ImageListItem } from '@material-ui/core'
import {inject,observer} from 'mobx-react'
import RankStore from '../../../../store/modules/rankStore'

interface IProps {
    rankStore?: RankStore
}
const GuessList = (props: IProps) => {
    const [dataList, setList] = React.useState<Array<any>>([{}])
    React.useEffect(() => {
        getAllGoods()
            .then(res => {
                const { code, data } = res as unknown as getAllGoodsAns
                if (code === 200) {
                    setList(data)
                }
            })
            .catch(err => {
                console.log(err);
            })
        props.rankStore?.getGoodsRank()
    }, [])// eslint-disable-line react-hooks/exhaustive-deps
    return (
        <div style={{
            padding: '2vh 2vw'
        }}>
            <div style={{
                fontSize: '16px',
                color: '#333',
                padding: '1vh 0',
                fontWeight: 'bolder'
            }}>
                猜你喜欢
            </div>
            <ImageList variant='masonry' cols={2} gap={8}>
                {
                    dataList?.map((item, index) => {
                        return (
                            <ImageListItem key={item.goodId + item.gname}>
                                <GuessItem itemInfo={item}/>
                            </ImageListItem>
                        )
                    })
                }
            </ImageList>
        </div>
    )
}

export default inject('rankStore')(observer(GuessList))